<template>
	<view class="tx">
		<view class="wz">个人资料</view>
		<image @click="fhjt" class="jt" src="/static/fhtb.jpg" mode=""></image>
		<view class="zl">
			<image src="../../static/tx.jpg" mode=""></image>

			<view class="zl1">昵称</view>
			<view class="zl2">性别</view>
			<view class="zl3">手机号</view>
			<view class="zl4">生日</view>
			<view class="zl5">填写完不可修改</view>
		</view>
		<view class="xx">
			<view>tom</view>
			<button>男</button>
			<button>女</button>
			<view>xxxxxxxxxxx</view>
			<view>x年x月x日</view>
		</view>
		<button @click="tcdl()" class="tc">退出登录</button>
	</view>

</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			tcdl() {
				uni.showModal({
					content: '确定要退出登录吗?',
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync('token')
							uni.reLaunch({
								url: '/pages/welcome/welcome'
							})
						}
					}
				})
			},
			fhjt() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	.tx {
		width: 100%;
		height: 100%;
		background: #f5f5f5;
	}

	.jt {
		position: relative;
		left: 10px;
		bottom: 25px;
		width: 20px;
		height: 23px;
	}

	.wz {
		margin-top: 10px;
		font-size: 22px;
		font-weight: bold;
		text-align: center;
	}

	.zl image {
		position: relative;
		top: -40px;
		left: 157px;
		width: 80px;
		height: 80px;
		border-radius: 50%;
	}

	.zl {
		margin-top: 100px;
		width: 100%;
		height: 350px;
		background-color: #fff;
		border-radius: 5%;
		font-size: 15px;
	}

	.zl1 {
		height: 30px;
		margin-top: -10px;
		padding-left: 30px;
		border-bottom: 1px solid #ccc;
	}

	.zl2 {
		height: 30px;
		margin-top: 30px;
		padding-left: 30px;
		border-bottom: 1px solid #ccc;
	}

	.zl3 {
		height: 30px;
		margin-top: 30px;
		padding-left: 30px;
		border-bottom: 1px solid #ccc;
	}

	.zl4 {
		height: 45px;
		margin-top: 30px;
		padding-left: 30px;
		border-bottom: 1px solid #ccc;
	}

	.zl5 {
		position: relative;
		top: -20px;
		left: 28px;
		font-size: 12px;
		color: #ccc;
	}

	.xx view:nth-child(1) {
		font-size: 20px;
		position: relative;
		top: -280px;
		left: 300px;
	}

	.xx button:nth-child(2) {
		width: 70px;
		position: relative;
		top: -260px;
		left: 75px;
		background-color: orange;
	}

	.xx button:nth-child(3) {
		width: 70px;
		position: relative;
		top: -306px;
		left: 155px;
	}

	.xx view:nth-child(4) {
		font-size: 20px;
		position: relative;
		top: -279px;
		left: 270px;
		color: #919191;
	}

	.xx view:nth-child(5) {
		font-size: 20px;
		position: relative;
		top: -242px;
		left: 280px;
	}

	.tc {
		background-color: #ccc;
		width: 200px;
		position: relative;
		bottom: 100px;
		border-radius: 30px;
		font-weight: bold;
	}
</style>